<template>
    <div class="detail-list">
        <div class="detail-list-item">
            <img src="@/assets/img/center-details-data1.png">
            <div class="detail-item-text">
                <h3>影视工匠总人数</h3>
                <span>117341</span>
                <span class="unit">人</span>
            </div>
        </div>
        <div class="detail-list-item">
            <img src="@/assets/img/center-details-data2.png">
            <div class="detail-item-text">
                <h3>活跃人数</h3>
                <span>15720</span>
                <span class="unit">人</span>
            </div>
        </div>
        <div class="detail-list-item">
            <img src="@/assets/img/center-details-data3.png">
            <div class="detail-item-text">
                <h3>当前在组人数</h3>
                <span>5910</span>
                <span class="unit">人</span>
            </div>
        </div>
        <div class="detail-list-item">
            <img src="@/assets/img/center-details-data4.png">
            <div class="detail-item-text">
                <h3>月人均参演数</h3>
                <span>10.8</span>
                <span class="unit">次/人</span>
            </div>
        </div>
        <div class="detail-list-item">
            <img src="@/assets/img/center-details-data5.png">
            <div class="detail-item-text">
                <h3>本月新增</h3>
                <span>418</span>
                <span class="unit">人</span>
            </div>
        </div>
        <div class="detail-list-item">
            <img src="@/assets/img/center-details-data6.png">
            <div class="detail-item-text">
                <h3>薪资水平</h3>
                <span>260</span>
                <span class="unit">元/8小时</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "centerBottom",
        components: {},
        data() {
            return {}
        },
        mounted() {
        },
        methods: {}
    }
</script>

<style scoped>
 .detail-list {
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -ms-flex-align: center;
     align-items: center;
     align-content: space-between;
     justify-content: space-around;
     width: 100%; height: 265px;
 }
 .detail-list-item {
     display: flex;
     align-items: center;
     position: relative;
     height: 126px;
     padding: 0 0.6%;
     width: 32%;
     border-radius: 5px;
     border: 1px solid #343f4b;
     background-color: rgba(19,25,47,0.8);
 }
 .detail-list-item img {
     width: 95px;
     height: 95px;
 }
 .detail-list-item .detail-item-text {
     margin-left: 12.5px;
 }
 .detail-list-item .detail-item-text h3 {
     color: #bcdcff;
     font-size: 16px;
     margin-bottom: 25px;
 }
 .detail-list-item .detail-item-text span {
     font-size: 25px;
     font-weight: bolder;
     background: linear-gradient(to bottom,#fff,#4db6e5);
     color: transparent;
     background-clip: text;
 }
 .detail-list-item .detail-item-text .unit {
     font-size: 20px;
     margin-left: 12.5px;
 }
</style>
